<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ include file="../header.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<%@taglib prefix="myFn" uri="http://situ.com/rbac" %>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
</head>
<body>

	<form id="formId"  class="layui-form layui-form-pane" action="">
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品名</label>
	    <div class="layui-input-block">
	      <input type="text" name="name" autocomplete="off" placeholder="请输入商品名" class="layui-input">
	    </div>
	  <%--</div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品副标题</label>
	    <div class="layui-input-block">
	      <input type="text" name="subtitle" lay-verify="required" placeholder="请输入商品副标题" autocomplete="off" class="layui-input">
	    </div>--%>
	  </div>
	  
	  <%--<div class="layui-form-item">
	    <label class="layui-form-label">青选择分类</label>
	    <div class="layui-input-inline">
	      <select lay-filter="filter">
	        <option value="">请选择一级分类</option>
	        <c:forEach items="${topCategoryList}" var="category">
	        	<option value="${category.id}" >${category.name}</option>
	        </c:forEach>
	      </select>
	    </div>
	    <div class="layui-input-inline">
	      <select id="categoryId" name="categoryId">
	        <option value="">请选择市</option>
	        
	      </select>
	    </div>
	  </div>--%>
	  <div class="layui-form-item">
		 <label class="layui-form-label">商品单位</label>
		 <div class="layui-input-block">
			<input type="text" name="unit" lay-verify="required" placeholder="请输入商品单位" autocomplete="off" class="layui-input">
		 </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品价格</label>
	    <div class="layui-input-block">
	      <input type="text" name="price" lay-verify="required" placeholder="请输入商品价格" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品数量</label>
	    <div class="layui-input-block">
	      <input type="text" name="stock" lay-verify="required" placeholder="请输入商品数量" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  
	 <%-- <div class="layui-form-item" pane="">
	    <label class="layui-form-label">商品状态</label>
	    <div class="layui-input-block">
	      <input type="radio" name="status" value="1" title="在售" checked="">
	      <input type="radio" name="status" value="2" title="下架">
	      <input type="radio" name="status" value="3" title="删除">
	    </div>
	  </div>--%>
	  
	  <div class="layui-form-item" pane="">
	    <label class="layui-form-label">图片上传</label>
	    <div class="layui-upload layui-input-inline">
			  <div class="layui-upload-list">
			  	<input type="hidden" name="image"/>
			    <img class="layui-upload-img" width="150px" height="150px" id="image">
			    <p id="demoText"></p>
			  </div>
			  <button type="button" class="layui-btn" id="uploadImage">上传图片</button>
			</div>  
	  </div>
	   <div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">商品详情</label>
	    <div class="layui-input-block">
	      <textarea id="detailId" placeholder="请输入内容" name="detail" class="layui-textarea"></textarea>
	    </div>
	  </div>
	  <div class="layui-form-item">
    	<input class="layui-btn" type="button" onclick="submitForm()" value="添加"/>
  	   </div>
	</form>
	
	<script src="${path}/static/kindeditor/kindeditor.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		layui.use(['form','upload'], function() {
			var form = layui.form;
			var upload = layui.upload;
			
			/*// Layui监听下拉框选择事件
			form.on('select(filter)', function(data){
			    console.log(data.elem); //得到select原始DOM对象
			    console.log(data.value); //得到被选中的值
			    console.log(data.othis); //得到美化后的DOM对象
			  	$.post(
			  		'${path}/category/selectSecondCategoryListByTopCategoryId.action',
			  		{'id': data.value},
			  		function(jsonResult) {
			  			console.log(jsonResult);
			  			var list = jsonResult.data; 
			  			$('#categoryId option:gt(0)').remove();
			  			$(list).each(function() {
			  				// this代表Category对象
			  				$("#categoryId").append('<option value="'+this.id+'">'+this.name+'</option>');
			  				// 刷新下拉框
			  				form.render('select');
			  			});
			  		},
			  		'json'
			  	);
			}); */
			
			
			 //普通图片上传
			  var uploadInst = upload.render({
			    elem: '#uploadImage'
			    ,url: '${path}/upload/uploadImage' //改成您自己的上传接口
			    ,before: function(obj){
			      //预读本地文件示例，不支持ie8
			      obj.preview(function(index, file, result){
			        $('#image').attr('src', result); //图片链接（base64）
			      });
			    }
			    ,done: function(jsonResult){
			    	if (jsonResult.ok) {
						var fileName = jsonResult.data;		
						$('input[name="image"]').val(fileName);
			    	}
			    }
			    ,error: function(){
			      //演示失败状态，并实现重传
			      var demoText = $('#demoText');
			      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			      demoText.find('.demo-reload').on('click', function(){
			        uploadInst.upload();
			      });
			    }
			  });
		});
		
		function submitForm() {
			$.post('${path}/product/insert',
				$('#formId').serialize(),
				function(jsonResult) {
					console.log(jsonResult);
					if(jsonResult.ok) {
                        mylayer.confirm("添加成功，是够跳转到商品列表界面？", "${path}/product/getProductPage");
						/*//当你在iframe页面关闭自身时获得当前弹出框的index索引
                        var index = parent.layer.getFrameIndex(window.name);
                        layer.msg(
    						jsonResult.msg,
   							{icon : 1, time : 2000},
   							function() {// msg消失之后触发的函数

    						    // 关闭弹出层
                             	parent.layer.close(index);
                             	// 刷新父页面
                             	window.parent.location.reload();
   							}
    					);*/
					} else {
						mylayer.errorMsg(jsonResult.msg);
					}
			    },
			    'json');
		}
		
		KindEditor.ready(function(K) {
		    var kingEditorParams = {
		         afterBlur: function () { this.sync(); }
		    }
		    KindEditor.create('#detailId', kingEditorParams);
		});
	
	</script>
</body>
</html>